<template>
  <div class="dw_story_list">
    <div class="header">
      <img style="width: 70%;" src="@/assets/img/dwgs_txt.png" alt="">
    </div>
    <van-search @update:model-value="onSearch" v-model="value" placeholder="请输入搜索关键词" />
    <div class="news_list">
      <skeleton-com v-if="showSkeleton" type="tzfw"></skeleton-com>
      <news-content v-else :show-swiper="false" @load="loadData" :loading="loading" :finished="finished"
                    :data="newsData"></news-content>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { INewsCommonRes, INewsRes, INewsResquestParam } from "../importantNews/type";
import { getNewsList } from "@/api/importantNews";
import { onMounted } from "vue";
import { useRoute } from 'vue-router';
import useGetPaginationData from '../importantNews/useGetData';
import skeletonCom from '@/components/skeletonCom/skeletonCom.vue';
import { debounce } from '@/util';
import newsContent from "@/components/newsContent/newsContent.vue";

const route = useRoute()
const value = ref("");
const params: INewsResquestParam = {
  token: '',
  page: 1,
  pageSize: 30,
  title: '',
  type: route.params.type as string
}
const { newsData, getData, loading, finished, showSkeleton } = useGetPaginationData<INewsResquestParam, INewsCommonRes<INewsRes[]>, INewsRes>(getNewsList);
onMounted(() => {
  getData(params)
})
const onSearch = debounce((value: string) => {
  params.page = 1
  params.title = value
  getData(params);
}, 800)
function goDetail(item: INewsRes) {
  window.location.href = item.linkAddress as string
}
function loadData() {
  params.page++
  getData(params)
}
</script>

<style lang="less" scoped>
.dw_story_list {
  .header {
    padding: 15px;
    box-sizing: border-box;
    background: url('@/assets/img/dwgs_bg.png') no-repeat center;
    background-size: 100% 100%;
  }

  .list {
    padding-bottom: 20px;

    .news-item {
      text-align: left;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFD773;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .top {


    .list {
      min-height: 180px;
    }
  }



  .divider {
    height: 10px;
    background-color: #f6f8fa;
  }

  .title {
    display: flex;
    align-items: center;
    color: #ffe8b3;
    font-weight: 600;
    font-size: 13px;
    color: #FFE8B3;

    &::before {
      content: '';
      height: 20px;
      width: 5px;
      background-color: #ffe8b3;
      display: inline-block;
      vertical-align: middle;
      margin-right: 7px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }



  .more {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #fff;
    cursor: pointer;
  }

  .story_title {
    font-size: 13px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #0D1722;

    &::before {
      background-color: #d10201;
    }

    color: black;
  }


}
</style>
<style lang="less">
.dw_story_list {
  .van-cell__title {
    text-align: left;
  }

  .van-cell {
    background-color: transparent;
  }
}
</style>